<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())||data.teacher.toLowerCase().includes(search.toLowerCase())||data.desc.toLowerCase().includes(search.toLowerCase())|| data.id.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="论文选题">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="指导老师">
            <span>{{ props.row.teacher }}</span>
          </el-form-item>
          <el-form-item label="开始时间">
            <span>{{ props.row.starttime }}</span>
          </el-form-item>
          <el-form-item label="结束时间">
            <span>{{ props.row.stoptime}}</span>
          </el-form-item>
          <el-form-item label="状态">
            <span>{{ props.row.state }}</span>
          </el-form-item>
          <el-form-item label="指导学生">
            <span>{{ props.row.stunum }}</span>
          </el-form-item>
          <el-form-item label="备注">
            <span>{{ props.row.desc }}</span>
          </el-form-item>

          <el-form-item label="已选人数">
            <span>{{ props.row.count }}</span>
          </el-form-item>

        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="编号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="论文题材"
      prop="name">
    </el-table-column>

    <el-table-column
      label="学年"
      prop="school_year">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="desc">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>

      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)">查看
        </el-button>
        <el-button
          size="mini"
          style="margin-right: 30px"
          type="success"
          @click="handleEdit(scope.$index, scope.row)">编辑
        </el-button>

      </template>






    </el-table-column>
  </el-table>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
.el-table__header{
  width: 100%;
}
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  export default {
    data() {
      return {
        search: '',
        tableData: [{
          id: '12987122',
          name: 'JAVAEE',
          teacher: '龙天才',
          desc: '使用框架写一个网站',
          state: '进行中',
          TComment: '我是老师的评语',
          starttime: "2019-10-10",
          stoptime: '2019-12-31',
          count: '12',
          stunum: '10',
          school_year: '2019年秋',
        }, {
          id: '12987122',
          name: '我是大可爱',
          teacher: '龙天才',
          school_year: '2019年秋',
          desc: '这是一个论文及成果管理系统',
          state: '已通过', stunum: '10',
          starttime: "2019-10-10",
          stoptime: '2019-12-31',
          count: '12'
        }, {
          id: '12987122',
          name: '小朋友',
          stunum: '10',
          teacher: '龙天',
          school_year: '2019年秋',
          desc: '这是一个论文及成果管理系统',
          state: '进行中',
          starttime: "2019-10-10",
          stoptime: '2019-12-31',
          count: '12'
        }, {
          id: '12987122',
          name: '成果管理系统',
          teacher: '龙天才',
          desc: '这是一个论文及成果管理系统',
          state: '进行中',
          stunum: '10',
          school_year: '2019年秋',
          starttime: "2019-10-10",
          stoptime: '2019-12-31',
          count: '12'
        }, {
          id: '12987122',
          name: '成果管理系统',
          teacher: '龙天才',
          desc: '这是一个论文及成果管理系统',
          state: '已结束',
          stunum: '10',
          starttime: "2019-10-10",
          stoptime: '2019-12-31',
          count: '12'
        },]
      }
    },
    methods: {

      handleEdit(index, row) {
        var self = this;
        this.$router.push({
          path: '/teacher/index/guidance',
          query: {
            id: this.tableData[index].name
          }
        })

      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>
